<!--  -->
<template>
  <div class="container">
    <div class="header">头部</div>
    <div class="menu">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>Navigator One</span>
          </template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
          <el-menu-item index="1-4-1">item one</el-menu-item>
          <el-menu-item index="1-4-1">item one</el-menu-item>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content">右侧内容</div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from "vue";
</script>

<style lang='less' scoped>
.container {
  height: 100%;
  position: relative;
  .header {
    height: 70px;
    background-color: rgb(62, 62, 213);
  }
  .menu {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: rgb(43, 43, 68);
  }
  .content {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 250px;
    right: 0;
    background-color: aliceblue;
  }
}
</style>